<!doctype html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"
        integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP" crossorigin="anonymous" />
    <link rel="stylesheet" href="/mobile/css/app.css">
    <title>My Orders</title>
</head>

<body class="mdui-theme-primary-red">
    <div class="mdui-container-fluid">
        <div class="mdui-toolbar mdui-color-deep-orange-700">
            <a href="/m" class="mdui-btn mdui-btn-icon">
                <i class="mdui-icon material-icons">arrow_back</i>
            </a>
        <span class="mdui-typo-title">我的订单</span>
            <div class="mdui-toolbar-spacer"></div>
        </div>
        <div class="mdui-container" style="">
            <div class="mdui-tab" mdui-tab>
                <a href="#example1-tab1" class="mdui-ripple">进行中</a>
                <a href="#example1-tab2" class="mdui-ripple">已完成</a>
                <a href="#example1-tab3" class="mdui-ripple">已过期</a>
            </div>
            <div id="example1-tab1" class="mdui-p-a-2">
                <div class="mdui-row mdui-m-t-1">
                    @if (count($orders)  >= 1)
                    <ul class="mdui-list">
                        @foreach ($orders as $order)
                        <li class="mdui-list-item mdui-ripple">
                            <div class="mdui-list-item-content">
                                <div class="mdui-list-item-title">深度保洁2小时 {{ $order->serve_date }} {{ $order->serve_time_rang }}</div>
                                <div class="mdui-list-item-text mdui-list-item-one-line">{{ $order->name }} - {{ $order->phone }}</div>
                            </div>    
                        </li>
                        <li class="mdui-divider-inset mdui-m-y-0"></li>
                        @endforeach
                    </ul>
                    @else
                    <div class="mdui-typo-caption mdui-m-t-4 mdui-text-center">
                        没有已完成的订单
                    </div>
                    @endif
                </div>
            </div>
            <div id="example1-tab2" class="mdui-p-a-2">
                <div class="mdui-typo-caption mdui-m-t-4 mdui-text-center">
                    没有已完成的订单
                </div>
            </div>
            <div id="example1-tab3" class="mdui-p-a-2">
                <div class="mdui-typo-caption mdui-m-t-4 mdui-text-center">
                    没有已过期的订单
                </div>
            </div>
        </div>
    </div>
    <div class="mdui-row mdui-text-center mdui-m-t-2 mdui-m-b-5">
        <div class="mdui-col-xs-12 mdui-m-b-5" class="mdui-text-color-theme">
            <a href="#" class="mdui-text-color-theme">花园服务</a>
            <p>Copyright © 2020 GardenServer.Group</p>
        </div>
    </div>
    <script src=" https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"
        integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+" crossorigin="anonymous">
    </script>
    <script>
        mdui.$(function() {
            // mdui.alert(null, 'content', function() {}, {
            //     history: false
            // });

        })

    </script>
</body>

</html>
